<template>
	<view class="my-modal-photo">
		<my-modal :title="title" :value="showPopup" @input="onInput" @confirm="onConfirm" :showBottom="false" width="700">
			<view class="content-box">
				<u-swiper :list="list" mode="number" effect3d :autoplay="false" height="400" bg-color="#ffffff" :current="current" @change="onChange" @click="onClickSwiper"></u-swiper>
				<u-grid :col="4" :border="false" @click="onClick">
					<u-grid-item :index="2"><u-icon name="plus-circle-fill" :size="56" color="#19be6b"></u-icon></u-grid-item>
					<u-grid-item :index="2"><u-icon name="camera-fill" :size="56"></u-icon></u-grid-item>
					<u-grid-item :index="3"><u-icon name="photo" :size="56"></u-icon></u-grid-item>
					<u-grid-item :index="4"><u-icon name="trash" :size="56" color="#fa3534"></u-icon></u-grid-item>
				</u-grid>
			</view>
		</my-modal>
	</view>
</template>

<script>
import { apiDeleteRecord } from '@/common/api.js';
import { baseUrl } from '@/common/config.js';
import { showErrorTips } from '@/util/index.js';
export default {
	name: 'my-modal-photo',
	props: {
		value: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: ''
		},
		houseId: {
			type: [String, Number],
			default: ''
		},
		iamges: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	watch: {
		value: {
			handler(nVal) {
				this.showPopup = nVal;
			},
			immediate: true
		},
		iamges: {
			handler(nVal) {
				this.list = nVal.map(item => {
					return {
						image: item.FilePath ? baseUrl + item.FilePath : ' ',
						...item
					};
				});
			},
			immediate: true
		}
	},
	data() {
		return {
			showPopup: false,
			customStyle: {
				padding: '0 40rpx'
			},
			list: [],
			current: 0
		};
	},
	methods: {
		onInput(val) {
			this.showPopup = val;
			this.$emit('input', val);
		},
		onClick(index) {
			switch (index) {
				case 1:
					this.chooseImage(['album', 'camera']);
					break;
				case 2:
					this.chooseImage(['camera']);
					break;
				case 3:
					this.chooseImage(['album']);
					break;
				case 4:
					this.onDel();
					break;
				default:
					break;
			}
		},
		chooseImage(source = ['album']) {
			uni.chooseImage({
				count: 1,
				sourceType: source, //从相册选择
				success: chooseImageRes => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					const tempFiles = chooseImageRes.tempFiles[0];
					uni.showLoading();
					uni.uploadFile({
						url: '/basic' + '/api/createRecord/6111', //仅为示例，非真实的接口地址
						file: tempFiles,
						name: 'FilePath',
						formData: {
							HouseId: this.houseId,
							FileName: '附件描述'
						},
						success: uploadFileRes => {
							const res = JSON.parse(uploadFileRes.data);
							const { isSuccess, record } = res;
							if (isSuccess) {
								uni.showToast({
									title: '上传成功'
								});
								this.list.push({
									...record,
									Id: record.id,
									image: baseUrl + record.filePath
								});
								this.current = this.list.length - 1;
							} else {
								showErrorTips('图片上传失败');
							}
						},
						fail: err => {
							showErrorTips('图片上传失败');
						},
						complete: () => {
							uni.hideLoading();
						}
					});
				}
			});
		},
		onChange(index) {
			this.current = index;
		},
		onDel() {
			const item = this.list[this.current];
			apiDeleteRecord({ MorphologyId: 6110, id: item.Id }).then(res => {
				const { isSuccess } = res;
				if (isSuccess) {
					uni.showToast({
						title: '删除成功'
					});
					this.list.splice(this.current, 1);
					this.current = this.list.length - 1;
				} else {
					showErrorTips('图片删除失败');
				}
			});
		},
		onClickSwiper(index) {
			const images = this.list.map(item => item.image);
			uni.previewImage({
				current: index,
				urls: images
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content-box {
	padding: $uni-spacing-row-lg;
}
</style>
